<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">

   <!-- 单选框 -->
   <div>
     <input type="checkbox" id="xieyi" v-model="isAgree" > 同意协议
     <button :disabled="!isAgree">下一步</button>
     <h2>你是否同意啦:{{isAgree}}</h2>
   </div>
   <!--多选框 -->
   <div>
     <input type="checkbox" id="b1" value="篮球" v-model="hobbies" > 篮球
     <input type="checkbox" id="b2" value="足球" v-model="hobbies" > 足球
     <input type="checkbox" id="b3" value="羽毛球" v-model="hobbies" > 羽毛球
     <input type="checkbox" id="b4" value="乒乓球" v-model="hobbies" > 乒乓球
     <input type="checkbox" id="b5" value="游泳" v-model="hobbies" > 游泳
     <h2>你选择的爱好是:{{hobbies}}</h2>
   </div>


   <!--多选框,值绑定 -->
   <div>
     <label v-for="item in originHobbies" :for="item">
       <input type="checkbox" :value="item" :id="item" v-model="hobbies" >{{item}}
     </label>
     <h2>你选择的爱好是:{{hobbies}}</h2>
   </div>
  </div>


     <script src="js/vue.js"></script>
     <script>
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
           isAgree:false, //单选框
           hobbies:[], //多选框
           originHobbies:['篮球','足球','羽毛球','乒乓球','游泳'],
         }
       })
     </script>
</body>
</html>